<clr-datagrid [clrDgLoading]="false" [(clrDgSelected)]="selected">
    <clr-dg-action-bar>
        <div class="btn-group">
            <button type="button" class="btn btn-sm btn-secondary" (click)="markAsRead()"
                    [disabled]="selected.length<1">
                <clr-icon shape="check" size="16"></clr-icon>
                {{'APP_MARK_AS_READ'|translate}}
            </button>
            <button type="button" class="btn btn-sm btn-secondary" (click)="onDelete()" [disabled]="selected.length<1">
                <clr-icon shape="close"></clr-icon>
                {{"APP_DELETE"|translate}}
            </button>
        </div>
    </clr-dg-action-bar>
    <clr-dg-column>
        {{'APP_MSG_CONTENT'|translate}}
    </clr-dg-column>
    <clr-dg-column>
        {{'APP_TYPE'|translate}}
    </clr-dg-column>
    <clr-dg-column>
        {{'APP_MSG_LEVEL'|translate}}
    </clr-dg-column>
    <clr-dg-column>
        {{'APP_STATUS'|translate}}
    </clr-dg-column>
    <clr-dg-column>
        {{'APP_CREATED_DATE'|translate}}
    </clr-dg-column>

    <clr-dg-row *clrDgItems="let item of items" [clrDgItem]="item">
        <clr-dg-cell style="cursor: pointer;overflow: hidden;text-overflow:ellipsis;
    white-space: nowrap;" [ngStyle]="{'color':item.readStatus==='UNREAD'?'#0079b8':'#969696'}" (click)="onDetail(item)"
                     href="javascript:void(0)">
            <clr-icon shape="folder" *ngIf="item.readStatus==='UNREAD'"></clr-icon>
            <clr-icon shape="folder-open" *ngIf="item.readStatus==='READ'"></clr-icon>
            {{item.message.title|translate}}
        </clr-dg-cell>
        <clr-dg-cell>{{item.message.type | messageType}}</clr-dg-cell>
        <clr-dg-cell>{{item.message.level }}</clr-dg-cell>
        <clr-dg-cell>{{item.readStatus | translate}}</clr-dg-cell>
        <clr-dg-cell>{{item.createdAt |date:'yyyy-MM-dd HH:mm:ss' }}</clr-dg-cell>
    </clr-dg-row>

    <clr-dg-footer>
        <clr-dg-pagination #pagination [(clrDgPage)]="page" [clrDgPageSize]="size" [clrDgTotalItems]="total"
                           (clrDgPageChange)="listByUsername()">
            {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
            {{"APP_PAGER_TOTAL"|translate}} {{pagination.totalItems}} {{"APP_MESSAGE"|translate}}
        </clr-dg-pagination>
    </clr-dg-footer>
</clr-datagrid>
